$(function () {
    $("#btn").on('click', e => {
        e.preventDefault()
        $.ajax({
            url: '/api/comment/post',
            type: 'POST',
            data: {
                contentid: $("#contentid").val(),
                content: $("#messageContent").val()
            },
            success(responseData) {
                renderComment(responseData.data.comments.reverse())
            }
        })
    })

    function renderComment(comments) {
        let html = ''
        for (let i = 0, length = comments.length; i < length; i++) {
            html += `
            <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                ${comments[i].username}
                <span class="text-info pull-right">${comments[i].postTime}</span>
                </h3>
            </div>
            <div class="panel-body">
                ${comments[i].content}
            </div>
        </div>
            `
        }
        $("#messageList").html(html)
    }
})